<template>
  <div class="issues-index">
    <div class="issues-index__header">
      <el-select
        filterable
        placeholder="请选择仓库"
        :value="currentRepo"
        @change="handleChangeRepo"
      >
        <div v-infinite-scroll="onLoadMoreRepos">
          <el-option
            v-for="item in repos"
            :key="item.full_name"
            :label="item.full_name"
            :value="item.full_name">
            <span>{{ item.full_name }}</span>
          </el-option>
        </div>
      </el-select>
    </div>
    <div class="issues-list-wrapper" v-infinite-scroll="onLoadMoreIssues">
      <Issues-list
        :data="issues"
        :currentRepo="currentRepo"
        v-top-loading="issuesLoading"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import IssuesList from '@/components/Issues/List.vue'
export default {
  name: 'issues',
  shareProvider () {
    return {
      key: 'refresh',
      data: {
        showRefreshButton: true,
        onClick: () => {
          this.$store.dispatch('issues/getIssues')
        }
      }
    }
  },
  data () {
    return {
      refreshOpen: true
    }
  },
  components: {
    IssuesList
  },
  computed: {
    ...mapState('repos', ['repos', 'currentRepo', 'reposLoading', 'reposLoaded']),
    ...mapState('issues', ['issues', 'issuesLoading', 'issuesLoaded'])
  },
  async created () {
    await this.$store.dispatch('repos/getRepos')
    if (this.currentRepo && !this.issues.length) {
      this.$store.dispatch('issues/getIssues')
    }
  },
  methods: {
    async handleChangeRepo (value) {
      await this.$store.dispatch('repos/setCurrentRepo', value)
      this.$store.dispatch('issues/getIssues')
    },
    onLoadMoreRepos () {
      if (!this.reposLoading && !this.reposLoaded) {
        this.$store.dispatch('repos/getRepos')
      }
    },
    onLoadMoreIssues () {
      if (this.currentRepo && !this.issuesLoading && !this.issuesLoaded) {
        this.$store.dispatch('issues/getIssuesNextPage')
      }
    }
  }
}
</script>

<style>
.issues-index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.issues-index__header {
  padding-bottom: 14px;
  width: 100%;
}

.issues-list-wrapper {
  width: 100%;
  margin-top: 10px;
  flex: 1;
}
</style>